<template>
  <div class="box">
    <PageDetailNav :proName="proInfo.name" />
    <PageDetailPreview
      :proData="proInfo"
      :collectStatus="collectStatus"
      @changeCollect="changeCollect"
    />
    <PageDetailOtherInfo :proData="proInfo" />
    <!-- <PageDetailDescription /> -->
    <pageDetailRelated />
    <pageDetailControl ref="controlRef"/>
  </div>
</template>

<script lang="ts" setup>
import { language } from "~/conf";
import { loginStore } from "@/components/store";
const loginStores = loginStore();
let controlRef = ref();
const { mess } = language;
const route = useRoute();
let collectStatus = ref(false);
type Tproperty = {
  propertyName: string;
  valueName: string;
};
type Tsku = {
  picUrl: string;
  id: number;
  price: number;
  volumePrice: number;
  stock: number;
  volume: number;
  weight: number;
  material: string;
  mop: number;
  volumeSpec: string;
  width: string;
  properties: Tproperty[];
};
type Tvideo = {
  materialType:string;
  materialUrl:string;
  materialId:number
}
type TproData = {
  sliderPicUrls: string[];
  name: string;
  salesCount: number;
  skus: Tsku[];
  productMaterialRespVOS:Tvideo[];
  spuAttributeRespVOS: {
    attributeName: string;
    value: string;
    sort: number
    id: number;
  }[];
  description: string;
  id: number;
};
let proInfo = ref<TproData>({
  sliderPicUrls: [],
  name: "",
  salesCount: -1,
  skus: [],
  id: -1,
  description: "",
  spuAttributeRespVOS: [],
  productMaterialRespVOS:[]
});
const init = async () => {
  const { data } = (await useServerFetch<TproData>("/app-api/product/spu/get-detail", {
    method: "get",
    query: {
      id: route.params.id,
    },
  })) as { data: TproData };
  const spuAttributeRespVOS = data.spuAttributeRespVOS.sort((a: {
    attributeName: string;
    value: string;
    sort: number;
    id: number;
  }, b: {
    attributeName: string;
    value: string;
    sort: number;
    id: number;
  }) => {
    return a.sort - b.sort;
  });
  proInfo.value = {
    ...data,
    spuAttributeRespVOS
  };
};

type Tseo = {
  headTag: string;
  keyword: string;
  mainKeyword: string;
  meta: string;
};
type Tpage = {
  name: string;
  seoDTO: Tseo | null;
};
const getPage = async () => {
  const { data } = (await useServerFetch<Tpage>("/app-api/promotion/diy-page/getByCode", {
    method: "get",
    query: {
      code: "productDetail",
    },
  })) as { data: Tpage };
  useHead({
    title: data.name,
    meta: [
      {
        hid: data?.seoDTO?.keyword,
        name: data?.seoDTO?.mainKeyword,
        content: data?.seoDTO?.keyword + "," + data?.seoDTO?.meta + "," + data?.seoDTO?.headTag,
      },
    ],
  });
};
const getCollect = async () => {
  const { data } = await useServerFetch("/app-api/product/favorite/exits", {
    method: "get",
    query: {
      spuId: route.params.id,
    },
  });
  if (data) {
    collectStatus.value = true;
  }
};
const changeCollect = async () => {
  if (collectStatus.value) {
    const { code, msg } = await useServerFetch("/app-api/product/favorite/delete", {
      method: "delete",
      body: {
        spuId: route.params.id,
      },
    });
    if (code === 0) {
      message.success(mess.saveSucess);
      collectStatus.value = false;
      controlRef.value.init(1)
    } else {
      message.error(msg);
      if (code == 401) {
        loginStores.needPoup = true;
      }
    }
  } else {
    const { code, msg } = await useServerFetch("/app-api/product/favorite/create", {
      method: "post",
      body: {
        spuId: route.params.id,
      },
    });
    if (code === 0) {
      message.success(mess.saveSucess);
      collectStatus.value = true;
      controlRef.value.init(1)
    } else {
      message.error(msg);
      if (code == 401) {
        loginStores.needPoup = true;
      }
    }
  }
};
init();
getPage();
getCollect();
</script>
<style lang="stylus" scoped>
.box{
  width:1080px;
  margin 0 auto
}
</style>
